<template>
	<view class="bg">
		<view class="reservecard" v-for="(item, index1) in reserveList.slice().reverse()" :key="item.id" :index="index1">
			<view class="table"style="font-weight: bold;font-size: 40rpx;">{{item.tableType| tabletype}}</view>
			<!-- <view class="date">7月15日</view> -->
			<view class="time">{{item.time| formatDate}}</view>
			<view class="status"style="font-weight: bold;">{{item.reserveState|reservestate}}</view>
			<button class="cancel" v-if="item.reserveState==6"@click="cancelqueue">取消预订</button>
		</view>
		
	</view>
</template>

<script>
	export default{
			data() {
				return {
					reserveList:[],
					
				};
			},
			onShow() {
					this.getReserveList();
					
				},
			methods: {
				
				getReserveList(){
					uni.request({
					url: 'http://10.50.28.38:8080/reserveList',
					header: {
						Authorization: uni.getStorageSync('token'),
						'Content-Type':'application/json',
					},
					data: {
						// id: currentTarget[res.data].id,
					},
					success: (res) => {
						this.reserveList=res.data.data,
						console.log(res.data.data)
						// currentTarget[res.data].started = e.data.data
					},
				})},
					cancelqueue(){
						const _this = this;
						const token = uni.getStorageSync('token');
						   uni.showModal({
						   	content:'确定取消预订吗？',
						   	success:(res) => {
						   		if (res.confirm) {
						   			uni.request({
						   				url: 'http://10.50.28.38:8080/cancelReserve',
						   				// method: 'POST',
						   				header: {
						   					'Content-Type':'application/json',
						   					Authorization: token
						   				},						
						   				success: (res) => {
											if(res.data.code == -15){
												uni.showToast({
													icon: 'none',
													title: '没有可以取消的预定',
													duration:2000,
												});
												return;
											}
											// if(res.data.status == 500){
											// 	uni.showToast({
											// 		icon: 'none',
											// 		title: '暂时没有排号可取消',
											// 		duration:2000,
											// 	});
											// 	return;
											// }
						   					uni.showToast({
						   						title:"取消预订成功",
						   						icon:'none'
						   					})
						   					uni.navigateTo({
						   						url:'./reversehistory'
						   					})
						   					},
						   			fail: () => {console.log("失败")},
						   				complete: () => {}
						   			});
									
						   		}
						   	}
						   })
					}
							
			},
			 filters: {
			            formatDate: function(value) {
			                if (!value) return '';
							var now = new Date(value);
							// console.log("time:" + JSON.stringify(now));
							var year = now.getFullYear();
							var month = now.getMonth() + 1;
							if (month < 10) {
								month = '0' + month;
							}
							var date = now.getDate();
							if (date < 10) {
								date = '0' + date;
							}
							var hours = now.getHours();
							if (hours < 10)
								hours = "0" + hours;
							var minutes = now.getMinutes();
							if (minutes < 10)
								minutes = "0" + minutes;
							return year + "-" + month + "-" + date+" " + hours + ":" + minutes;
			            },
						tabletype:function(value){
							if(value==0)return '小桌';
							if(value==1)return '中桌';
							if(value==2)return '大桌';
							else  return ' ';
						},
						reservestate:function(value){
							if(value==3)return '订单已完成';
							if(value==4)return '订单已过期';
							if(value==5)return '订单待确认（后台）';
							if(value==6)return '待使用';
							if(value==7)return '被取消';
							// else return'请重新取号';
						}
			        },

	}
</script>

<style lang="scss">
	.bg{
		width: 100vw;
		height: 100vh;
		background-color:#f3f3f3;
	}
	.reservecard{
		background-color: #ffaa00;
		border-radius: 40rpx;
		box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-top: 10rpx;
		height:200rpx;
		.table{
			margin-left: 20rpx;
		}
		.date{
			display: flex;
			// border: 1px solid #aaff00;
			// justify-content: space-evenly;
			flex-direction: row-reverse;
			margin-right: 20rpx;
			// margin-bottom: 20rpx;
		}
		.time{
			display: flex;
			flex-direction: row-reverse;
			margin-right: 20rpx;
		}
		.status{
			display: flex;
			flex-direction: row-reverse;
			margin-right: 20rpx;
		}
		.cancel{
			display: flex;
			flex-direction: row-reverse;
			margin-right: 20rpx;
			height: 50rpx;
			font-size: 25rpx;
			color: orange;
			border-radius: 50rpx;
		}
	}
</style>
